<!-- ColoredValue.svelte -->
<script lang="ts">
	import type { IndicatorActionWrap, KlineFlat } from './bindings'

	export let klineFlat: KlineFlat
	export let columnName: string

	function format(): { colorClass: string; value: string | number } {
		const entry = klineFlat.map[columnName]
		if (!entry) return { colorClass: 'text-gray-900', value: '' }

		if ('Float' in entry) {
			const value = entry.Float
			return value < 0
				? { colorClass: 'text-gray-500', value: value.toFixed(2) }
				: { colorClass: 'text-gray-900', value: value.toFixed(2) }
		} else if ('Action' in entry && entry.Action !== null) {
			const action: IndicatorActionWrap = entry.Action
			if (action.buy > 0) {
				return { colorClass: 'text-red-500', value: `B${action.buy}` }
			} else if (action.sell > 0) {
				return { colorClass: 'text-green-500', value: `S${action.sell}` }
			}
		}

		return { colorClass: 'text-gray-900', value: '' } // Default return if no condition matches
	}

	let { colorClass, value } = format()
</script>

{#if format()}
	<span class={colorClass}>
		{value}
	</span>
{:else}
	&mdash;
{/if}
